<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Zend_Form Quick Start - Zend Framework Manual</title>

    <link href="../css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../css/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <link href="../css/styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Zend Framework</h1>
<h2>Programmer's Reference Guide</h2>
<ul>
    <li><a href="../en/zend.form.quickstart.html">Inglês (English)</a></li>
    <li><a href="../pt-br/zend.form.quickstart.html">Português Brasileiro (Brazilian Portuguese)</a></li>
</ul>
<table width="100%">
    <tr valign="top">
        <td width="85%">
            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="zend.form.introduction.html">Zend_Form</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="zend.form.html">Zend_Form</a></span><br />
                        <span class="home"><a href="manual.html">Programmer's Reference Guide</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="zend.form.elements.html">Creating Form Elements Using Zend_Form_Element</a></div>
                    </td>
                </tr>
            </table>
<hr />
<div id="zend.form.quickstart" class="section"><div class="info"><h1 class="title">Zend_Form Quick Start</h1></div>
    

    <p class="para">
        This quick start guide covers the basics of creating,
        validating, and rendering forms with <span class="classname">Zend_Form</span>.
    </p>

    <div class="section" id="zend.form.quickstart.create"><div class="info"><h1 class="title">Create a form object</h1></div>
        

        <p class="para">
            Creating a form object is very simple: simply instantiate
            <span class="classname">Zend_Form</span>:
        </p>

        <pre class="programlisting brush: php">
$form = new Zend_Form;
</pre>


        <p class="para">
            For advanced use cases, you may want to create a
            <span class="classname">Zend_Form</span> subclass, but for simple forms, you can
            create a form programmatically using a <span class="classname">Zend_Form</span>
            object.
        </p>

        <p class="para">
            If you wish to specify the form action and method (always good
            ideas), you can do so with the  <span class="methodname">setAction()</span> and
             <span class="methodname">setMethod()</span> accessors:
        </p>

        <pre class="programlisting brush: php">
$form-&gt;setAction(&#039;/resource/process&#039;)
     -&gt;setMethod(&#039;post&#039;);
</pre>


        <p class="para">
            The above code sets the form action to the partial <acronym class="acronym">URL</acronym>
            &quot;<var class="filename">/resource/process</var>&quot; and the form method to <acronym class="acronym">HTTP</acronym>
            <acronym class="acronym">POST</acronym>. This will be reflected during final rendering.
        </p>

        <p class="para">
            You can set additional <acronym class="acronym">HTML</acronym> attributes for the
            <em class="emphasis">&lt;form&gt;</em> tag by using the  <span class="methodname">setAttrib()</span>
            or  <span class="methodname">setAttribs()</span> methods. For instance, if you wish to set the
            id, set the &quot;<span class="property">id</span>&quot; attribute:
        </p>

        <pre class="programlisting brush: php">
$form-&gt;setAttrib(&#039;id&#039;, &#039;login&#039;);
</pre>

    </div>

    <div class="section" id="zend.form.quickstart.elements"><div class="info"><h1 class="title">Add elements to the form</h1></div>
        

        <p class="para">
            A form is nothing without its elements. <span class="classname">Zend_Form</span>
            ships with some default elements that render <acronym class="acronym">XHTML</acronym> via
            <span class="classname">Zend_View</span> helpers. These are as follows:
        </p>

        <ul class="itemizedlist">
            <li class="listitem"><p class="para">button</p></li>

            <li class="listitem">
                <p class="para">checkbox (or many checkboxes at once with multiCheckbox)</p>
            </li>

            <li class="listitem"><p class="para">hidden</p></li>
            <li class="listitem"><p class="para">image</p></li>
            <li class="listitem"><p class="para">password</p></li>
            <li class="listitem"><p class="para">radio</p></li>
            <li class="listitem"><p class="para">reset</p></li>
            <li class="listitem"><p class="para">select (both regular and multi-select types)</p></li>
            <li class="listitem"><p class="para">submit</p></li>
            <li class="listitem"><p class="para">text</p></li>
            <li class="listitem"><p class="para">textarea</p></li>
        </ul>

        <p class="para">
            You have two options for adding elements to a form: you can
            instantiate concrete elements and pass in these objects, or you can
            pass in simply the element type and have <span class="classname">Zend_Form</span>
            instantiate an object of the correct type for you.
        </p>

        <p class="para">
            Some examples:
        </p>

        <pre class="programlisting brush: php">
// Instantiating an element and passing to the form object:
$form-&gt;addElement(new Zend_Form_Element_Text(&#039;username&#039;));

// Passing a form element type to the form object:
$form-&gt;addElement(&#039;text&#039;, &#039;username&#039;);
</pre>


        <p class="para">
            By default, these do not have any validators or filters. This means
            you will need to configure your elements with at least validators,
            and potentially filters. You can either do this (a) before you pass
            the element to the form, (b) via configuration options passed in
            when creating an element via <span class="classname">Zend_Form</span>, or (c) by
            pulling the element from the form object and configuring it after
            the fact.
        </p>

        <p class="para">
            Let&#039;s first look at creating validators for a concrete element
            instance. You can either pass in <span class="classname">Zend_Validate_*</span>
            objects, or the name of a validator to utilize:
        </p>

        <pre class="programlisting brush: php">
$username = new Zend_Form_Element_Text(&#039;username&#039;);

// Passing a Zend_Validate_* object:
$username-&gt;addValidator(new Zend_Validate_Alnum());

// Passing a validator name:
$username-&gt;addValidator(&#039;alnum&#039;);
</pre>


        <p class="para">
            When using this second option, you can pass constructor arguments in an array as the
            third parameter if the validator can accept tem:
        </p>

        <pre class="programlisting brush: php">
// Pass a pattern
$username-&gt;addValidator(&#039;regex&#039;, false, array(&#039;/^[a-z]/i&#039;));
</pre>


        <p class="para">
            (The second parameter is used to indicate whether or not failure of
            this validator should prevent later validators from running; by
            default, this is <b><tt>FALSE</tt></b>.)
        </p>

        <p class="para">
            You may also wish to specify an element as required. This can be
            done using an accessor or passing an option when creating
            the element. In the former case:
        </p>

        <pre class="programlisting brush: php">
// Make this element required:
$username-&gt;setRequired(true);
</pre>


        <p class="para">
            When an element is required, a &#039;NotEmpty&#039; validator is added to the
            top of the validator chain, ensuring that the element has a value
            when required.
        </p>

        <p class="para">
            Filters are registered in basically the same way as validators. For
            illustration purposes, let&#039;s add a filter to lowercase the final
            value:
        </p>

        <pre class="programlisting brush: php">
$username-&gt;addFilter(&#039;StringtoLower&#039;);
</pre>


        <p class="para">
            The final element setup might look like this:
        </p>

        <pre class="programlisting brush: php">
$username-&gt;addValidator(&#039;alnum&#039;)
         -&gt;addValidator(&#039;regex&#039;, false, array(&#039;/^[a-z]/&#039;))
         -&gt;setRequired(true)
         -&gt;addFilter(&#039;StringToLower&#039;);

// or, more compactly:
$username-&gt;addValidators(array(&#039;alnum&#039;,
        array(&#039;regex&#039;, false, &#039;/^[a-z]/i&#039;)
    ))
    -&gt;setRequired(true)
    -&gt;addFilters(array(&#039;StringToLower&#039;));
</pre>


        <p class="para">
            Simple as this is, repeating it this for every element in a form
            can be a bit tedious. Let&#039;s try option (b) from above. When we
            create a new element using  <span class="methodname">Zend_Form::addElement()</span> as
            a factory, we can optionally pass in configuration options. These
            can include validators and filters. To do all of the
            above implicitly, try the following:
        </p>

        <pre class="programlisting brush: php">
$form-&gt;addElement(&#039;text&#039;, &#039;username&#039;, array(
    &#039;validators&#039; =&gt; array(
        &#039;alnum&#039;,
        array(&#039;regex&#039;, false, &#039;/^[a-z]/i&#039;)
    ),
    &#039;required&#039; =&gt; true,
    &#039;filters&#039;  =&gt; array(&#039;StringToLower&#039;),
));
</pre>


        <blockquote class="note"><p><b class="note">Note</b>: 
            <p class="para">
                If you find you are setting up elements using the same options in
                many locations, you may want to consider creating your own
                <span class="classname">Zend_Form_Element</span> subclass and utilizing that class
                instead; this will save you typing in the long-run.
            </p>
        </p></blockquote>
    </div>

    <div class="section" id="zend.form.quickstart.render"><div class="info"><h1 class="title">Render a form</h1></div>
        

        <p class="para">
            Rendering a form is simple. Most elements use a
            <span class="classname">Zend_View</span> helper to render themselves, and thus need a
            view object in order to render. Other than that, you have two
            options: use the form&#039;s render() method, or simply echo it.
        </p>

        <pre class="programlisting brush: php">
// Explicitly calling render(), and passing an optional view object:
echo $form-&gt;render($view);

// Assuming a view object has been previously set via setView():
echo $form;
</pre>


        <p class="para">
            By default, <span class="classname">Zend_Form</span> and
            <span class="classname">Zend_Form_Element</span> will attempt to use the view object
            initialized in the <span class="classname">ViewRenderer</span>, which means you won&#039;t
            need to set the view manually when using the Zend Framework <acronym class="acronym">MVC</acronym>.
            To render a form in a view, you simply have to do the following:
        </p>

        <pre class="programlisting brush: php">
&lt;?php echo $this-&gt;form ?&gt;
</pre>


        <p class="para">
            Under the hood, <span class="classname">Zend_Form</span> uses &quot;decorators&quot; to perform
            rendering. These decorators can replace content, append content, or
            prepend content, and can fully introspect the element passed
            to them. As a result, you can combine multiple decorators to
            achieve custom effects. By default, <span class="classname">Zend_Form_Element</span>
            actually combines four decorators to achieve its output; setup
            looks something like this:
        </p>

        <pre class="programlisting brush: php">
$element-&gt;addDecorators(array(
    &#039;ViewHelper&#039;,
    &#039;Errors&#039;,
    array(&#039;HtmlTag&#039;, array(&#039;tag&#039; =&gt; &#039;dd&#039;)),
    array(&#039;Label&#039;, array(&#039;tag&#039; =&gt; &#039;dt&#039;)),
));
</pre>


        <p class="para">
            (Where &lt;HELPERNAME&gt; is the name of a view helper to use, and varies
            based on the element.)
        </p>

        <p class="para">
            The above creates output like the following:
        </p>

        <pre class="programlisting brush: html">
&lt;dt&gt;&lt;label for=&quot;username&quot; class=&quot;required&quot;&gt;Username&lt;/dt&gt;
&lt;dd&gt;
    &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;123-abc&quot; /&gt;
    &lt;ul class=&quot;errors&quot;&gt;
        &lt;li&gt;&#039;123-abc&#039; has not only alphabetic and digit characters&lt;/li&gt;
        &lt;li&gt;&#039;123-abc&#039; does not match against pattern &#039;/^[a-z]/i&#039;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/dd&gt;
</pre>


        <p class="para">
            (Albeit not with the same formatting.)
        </p>

        <p class="para">
            You can change the decorators used by an element if you wish to
            have different output; see the section on decorators for more
            information.
        </p>

        <p class="para">
            The form itself simply loops through the elements, and dresses them
            in an <acronym class="acronym">HTML</acronym> <em class="emphasis">&lt;form&gt;</em>. The action and method
            you provided when setting up the form are provided to the
            <em class="emphasis">&lt;form&gt;</em> tag, as are any attributes you set via
             <span class="methodname">setAttribs()</span> and family.
        </p>

        <p class="para">
            Elements are looped either in the order in which they were
            registered, or, if your element contains an order attribute, that
            order will be used. You can set an element&#039;s order using:
        </p>

        <pre class="programlisting brush: php">
$element-&gt;setOrder(10);
</pre>


        <p class="para">
            Or, when creating an element, by passing it as an option:
        </p>

        <pre class="programlisting brush: php">
$form-&gt;addElement(&#039;text&#039;, &#039;username&#039;, array(&#039;order&#039; =&gt; 10));
</pre>

    </div>

    <div class="section" id="zend.form.quickstart.validate"><div class="info"><h1 class="title">Check if a form is valid</h1></div>
        

        <p class="para">
            After a form is submitted, you will need to check and see if it
            passes validations. Each element is checked against the data
            provided; if a key matching the element name is not present, and
            the item is marked as required, validations are run with a <b><tt>NULL</tt></b>
            value.
        </p>

        <p class="para">
            Where does the data come from? You can use <var class="varname">$_POST</var> or
            <var class="varname">$_GET</var>, or any other data source you might have at hand
            (web service requests, for instance):
        </p>

        <pre class="programlisting brush: php">
if ($form-&gt;isValid($_POST)) {
    // success!
} else {
    // failure!
}
</pre>


        <p class="para">
            With <acronym class="acronym">AJAX</acronym> requests, you can sometimes get away with validating
            a single element, or groups of elements.
             <span class="methodname">isValidPartial()</span> will validate a partial form. Unlike
             <span class="methodname">isValid()</span>, however, if a particular key is not
            present, it will not run validations for that particular element:
        </p>

        <pre class="programlisting brush: php">
if ($form-&gt;isValidPartial($_POST)) {
    // elements present all passed validations
} else {
    // one or more elements tested failed validations
}
</pre>


        <p class="para">
            An additional method,  <span class="methodname">processAjax()</span>, can be used
            for validating partial forms. Unlike  <span class="methodname">isValidPartial()</span>,
            it returns a <acronym class="acronym">JSON</acronym>-formatted string containing error messages on
            failure.
        </p>

        <p class="para">
            Assuming your validations have passed, you can now fetch the
            filtered values:
        </p>

        <pre class="programlisting brush: php">
$values = $form-&gt;getValues();
</pre>


        <p class="para">
            If you need the unfiltered values at any point, use:
        </p>

        <pre class="programlisting brush: php">
$unfiltered = $form-&gt;getUnfilteredValues();
</pre>


        <p class="para">
            If you on the other hand need all the valid and filtered values of a partially valid
            form, you can call:
        </p>

        <pre class="programlisting brush: php">
$values = $form-&gt;getValidValues($_POST);
</pre>

    </div>

    <div class="section" id="zend.form.quickstart.errorstatus"><div class="info"><h1 class="title">Get error status</h1></div>
        

        <p class="para">
            Did your form have failed validations on submission? In most cases, you can simply
            render the form again, and errors will be displayed when using the
            default decorators:
        </p>

        <pre class="programlisting brush: php">
if (!$form-&gt;isValid($_POST)) {
    echo $form;

    // or assign to the view object and render a view...
    $this-&gt;view-&gt;form = $form;
    return $this-&gt;render(&#039;form&#039;);
}
</pre>


        <p class="para">
            If you want to inspect the errors, you have two methods.
             <span class="methodname">getErrors()</span> returns an associative array of element
            names / codes (where codes is an array of error codes).
             <span class="methodname">getMessages()</span> returns an associative array of element
            names / messages (where messages is an associative array of error
            code / error message pairs). If a given element does not have any
            errors, it will not be included in the array.
        </p>
    </div>

    <div class="section" id="zend.form.quickstart.puttingtogether"><div class="info"><h1 class="title">Putting it together</h1></div>
        

        <p class="para">
            Let&#039;s build a simple login form. It will need elements
            representing:
        </p>

        <ul class="itemizedlist">
            <li class="listitem"><p class="para">username</p></li>
            <li class="listitem"><p class="para">password</p></li>
            <li class="listitem"><p class="para">submit</p></li>
        </ul>

        <p class="para">
            For our purposes, let&#039;s assume that a valid username should be
            alphanumeric characters only, start with a letter, have a minimum
            length of 6, and maximum length of 20; they will be normalized to
            lowercase. Passwords must be a minimum of 6 characters. We&#039;ll
            simply toss the submit value when done, so it can remain
            unvalidated.
        </p>

        <p class="para">
            We&#039;ll use the power of <span class="classname">Zend_Form</span>&#039;s configuration
            options to build the form:
        </p>

        <pre class="programlisting brush: php">
$form = new Zend_Form();
$form-&gt;setAction(&#039;/user/login&#039;)
     -&gt;setMethod(&#039;post&#039;);

// Create and configure username element:
$username = $form-&gt;createElement(&#039;text&#039;, &#039;username&#039;);
$username-&gt;addValidator(&#039;alnum&#039;)
         -&gt;addValidator(&#039;regex&#039;, false, array(&#039;/^[a-z]+/&#039;))
         -&gt;addValidator(&#039;stringLength&#039;, false, array(6, 20))
         -&gt;setRequired(true)
         -&gt;addFilter(&#039;StringToLower&#039;);

// Create and configure password element:
$password = $form-&gt;createElement(&#039;password&#039;, &#039;password&#039;);
$password-&gt;addValidator(&#039;StringLength&#039;, false, array(6))
         -&gt;setRequired(true);

// Add elements to form:
$form-&gt;addElement($username)
     -&gt;addElement($password)
     // use addElement() as a factory to create &#039;Login&#039; button:
     -&gt;addElement(&#039;submit&#039;, &#039;login&#039;, array(&#039;label&#039; =&gt; &#039;Login&#039;));
</pre>


        <p class="para">
            Next, we&#039;ll create a controller for handling this:
        </p>

        <pre class="programlisting brush: php">
class UserController extends Zend_Controller_Action
{
    public function getForm()
    {
        // create form as above
        return $form;
    }

    public function indexAction()
    {
        // render user/form.phtml
        $this-&gt;view-&gt;form = $this-&gt;getForm();
        $this-&gt;render(&#039;form&#039;);
    }

    public function loginAction()
    {
        if (!$this-&gt;getRequest()-&gt;isPost()) {
            return $this-&gt;_forward(&#039;index&#039;);
        }
        $form = $this-&gt;getForm();
        if (!$form-&gt;isValid($_POST)) {
            // Failed validation; redisplay form
            $this-&gt;view-&gt;form = $form;
            return $this-&gt;render(&#039;form&#039;);
        }

        $values = $form-&gt;getValues();
        // now try and authenticate....
    }
}
</pre>


        <p class="para">
            And a view script for displaying the form:
        </p>

        <pre class="programlisting brush: php">
&lt;h2&gt;Please login:&lt;/h2&gt;
&lt;?php echo $this-&gt;form ?&gt;
</pre>


        <p class="para">
            As you&#039;ll note from the controller code, there&#039;s more work to do:
            while the submission may be valid, you may still need to do some authentication
            using <span class="classname">Zend_Auth</span> or another authorization mechanism.
        </p>
    </div>

    <div class="section" id="zend.form.quickstart.config"><div class="info"><h1 class="title">Using a Zend_Config Object</h1></div>
        

        <p class="para">
            All <span class="classname">Zend_Form</span> classes are configurable using
            <span class="classname">Zend_Config</span>; you can either pass a
            <span class="classname">Zend_Config</span> object to the constructor or pass it in
            with  <span class="methodname">setConfig()</span>. Let&#039;s look at how we might create the
            above form using an <acronym class="acronym">INI</acronym> file. First, let&#039;s follow the
            recommendations, and place our configurations into sections
            reflecting the release location, and focus on the &#039;development&#039;
            section. Next, we&#039;ll setup a section for the given controller
            (&#039;user&#039;), and a key for the form (&#039;login&#039;):
        </p>

        <pre class="programlisting brush: ini">
[development]
; general form metainformation
user.login.action = &quot;/user/login&quot;
user.login.method = &quot;post&quot;

; username element
user.login.elements.username.type = &quot;text&quot;
user.login.elements.username.options.validators.alnum.validator = &quot;alnum&quot;
user.login.elements.username.options.validators.regex.validator = &quot;regex&quot;
user.login.elements.username.options.validators.regex.options.pattern = &quot;/^[a-z]/i&quot;
user.login.elements.username.options.validators.strlen.validator = &quot;StringLength&quot;
user.login.elements.username.options.validators.strlen.options.min = &quot;6&quot;
user.login.elements.username.options.validators.strlen.options.max = &quot;20&quot;
user.login.elements.username.options.required = true
user.login.elements.username.options.filters.lower.filter = &quot;StringToLower&quot;

; password element
user.login.elements.password.type = &quot;password&quot;
user.login.elements.password.options.validators.strlen.validator = &quot;StringLength&quot;
user.login.elements.password.options.validators.strlen.options.min = &quot;6&quot;
user.login.elements.password.options.required = true

; submit element
user.login.elements.submit.type = &quot;submit&quot;
</pre>


        <p class="para">
            You would then pass this to the form constructor:
        </p>

        <pre class="programlisting brush: php">
$config = new Zend_Config_Ini($configFile, &#039;development&#039;);
$form   = new Zend_Form($config-&gt;user-&gt;login);
</pre>


        <p class="para">
            and the entire form will be defined.
        </p>
    </div>

    <div class="section" id="zend.form.quickstart.conclusion"><div class="info"><h1 class="title">Conclusion</h1></div>
        

        <p class="para">
            Hopefully with this little tutorial, you should now be well on your
            way to unlocking the power and flexibility of
            <span class="classname">Zend_Form</span>. Read on for more in-depth information!
        </p>
    </div>
</div>
        <hr />

            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="zend.form.introduction.html">Zend_Form</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="zend.form.html">Zend_Form</a></span><br />
                        <span class="home"><a href="manual.html">Programmer's Reference Guide</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="zend.form.elements.html">Creating Form Elements Using Zend_Form_Element</a></div>
                    </td>
                </tr>
            </table>
</td>
        <td style="font-size: smaller;" width="15%"> <style type="text/css">
#leftbar {
	float: left;
	width: 186px;
	padding: 5px;
	font-size: smaller;
}
ul.toc {
	margin: 0px 5px 5px 5px;
	padding: 0px;
}
ul.toc li {
	font-size: 85%;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: center left;
}
ul.toc li.header {
	font-size: 115%;
	padding: 5px 0px 5px 11px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 5px;
}
ul.toc li.active {
	font-weight: bold;
}
ul.toc li a {
	text-decoration: none;
}
ul.toc li a:hover {
	text-decoration: underline;
}
</style>
 <ul class="toc">
  <li class="header home"><a href="manual.html">Programmer's Reference Guide</a></li>
  <li class="header up"><a href="manual.html">Programmer's Reference Guide</a></li>
  <li class="header up"><a href="reference.html">Zend Framework Reference</a></li>
  <li class="header up"><a href="zend.form.html">Zend_Form</a></li>
  <li><a href="zend.form.introduction.html">Zend_Form</a></li>
  <li class="active"><a href="zend.form.quickstart.html">Zend_Form Quick Start</a></li>
  <li><a href="zend.form.elements.html">Creating Form Elements Using Zend_Form_Element</a></li>
  <li><a href="zend.form.forms.html">Creating Forms Using Zend_Form</a></li>
  <li><a href="zend.form.decorators.html">Creating Custom Form Markup Using Zend_Form_Decorator</a></li>
  <li><a href="zend.form.standardElements.html">Standard Form Elements Shipped With Zend Framework</a></li>
  <li><a href="zend.form.standardDecorators.html">Standard Form Decorators Shipped With Zend Framework</a></li>
  <li><a href="zend.form.i18n.html">Internationalization of Zend_Form</a></li>
  <li><a href="zend.form.advanced.html">Advanced Zend_Form Usage</a></li>
 </ul>
 </td>
    </tr>
</table>

<script type="text/javascript" src="../js/shCore.js"></script>
<script type="text/javascript" src="../js/shAutoloader.js"></script>
<script type="text/javascript" src="../js/main.js"></script>

</body>
</html>